<template>
    <div>
        <!--ref属性可以指定一个DOM的标识，让Vue拿到这个DOM-->
        <h1 v-text="msg" ref="title"></h1>
        <button @click="showDom">点我输出上面的DOM元素</button>
        <School ref="sch"></School>
    </div>
</template>

<script>
//引入School组件
import School from './components/School.vue'

export default {
    name: 'App',
    components: {
        School
    },
    data() {
        return {
            msg: '欢迎学习Vue',
        }
    },
    methods: {
        showDom(){
            //有ref属性的dom都会被放到组件实例对象(vc)的$refs属性下
            console.log(this.$refs.title) //<h1>真实DOM

            //如果在组件标签上加ref属性，则可以通过$refs属性拿到组件实例对象(vc)
             console.log(this.$refs.sch) //School的VueComponent实例
        }
    },
}
</script>

<style>

</style>